<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import Avatar from "@/components/Avatar.vue";
import { getMenu } from "./router";
const route = useRoute(), noLayout = ref(false), router = useRouter(),
  show = ref(false), title = ref(""),
  navIndex = ref(""),
  nav = ref<any[]>([]),
  me = ref(api.me);
async function app() {
  noLayout.value = !!route.meta.notLayout;
  try {
    if (!noLayout.value) {
      title.value = await getSetting("websiteName");
      api.nav = await getMenu();
      nav.value = api.nav;
      me.value = api.me;
      navIndex.value = route.path;
      show.value = true;
      return;
    }
  } catch (_) { }
  show.value = false;
}
watch(route, app, { immediate: true });
function toLogin() {
  router.replace({ path: "/login" });
}
</script>
<template>
  <router-view v-if="noLayout" />
  <div v-else-if="show" class="app y oh whf">
    <div class="top x jc oh zb nsx">
      <div class="left">
        <div class="logo" />
        <div class="title">{{ title }}</div>
      </div>
      <div class="middle zc">
        <TreeElMenu :data="nav" mode="horizontal" v-model="navIndex" router />
      </div>
      <div class="right">
        <Avatar v-model="me" />
        <el-button class="mac-ico-tuichu" @click.stop="toLogin" />
      </div>
    </div>
    <div class="fg1 oh"><router-view /></div>
  </div>
</template>
<style lang="scss" scoped>
.app {
  >.top {
    height: 6em;
    padding: 1em;

    >div {
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      flex-shrink: 0;
    }

    >.left {
      >.logo {
        background: url("/favicon.ico") center no-repeat;
        background-size: contain;
        height: 100%;
        width: 5em;
      }
    }
    >.middle {
      width: 50%;

      >:first-child {
        width: 100%;
      }
    }

    >.right {
      min-width: 6em;
    }
  }
}
</style>